<template>
  <div class="record">
    <div class="card"
         v-for="(item,index) in items"
         :key="index">
      <div class="flex start">
        <p>购买时间：</p>
        <p>{{item.purchaseDate}}</p>
      </div>
      <div class="flex start">
        <p>卡类别：</p>
        <p>{{item.cardType | type}}</p>
      </div>
      <div class="flex start">
        <p>数量：</p>
        <p>{{item.qty}}张</p>
      </div>
      <div class="flex start">
        <p>金额：</p>
        <p>{{item.amount}}元</p>
      </div>
    </div>
    <div class="nothing"
         v-show="nothingShow">
      <img src="../../assets/image/nothing.png">
      <p> 暂无数据</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as API from '../../api'
export default {
  data () {
    return {
      items: '',
      nothingShow: true
    }
  },
  created () {
    this.$http.get(API.record, {
      params: {
        openId: this.userInfo.openId
      } }).then(res => {
      if (res.data.code === 0) {
        if (res.data.record.length) {
          this.nothingShow = false
          this.items = res.data.record
        }
      } else if (res.data.code === 1) {
        this.$router.go(-1)
      }
      console.log(res.data.record)
    }).catch(err => {
      console.log(err)
    })
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {

  },
  filters: {
    type (val) {
      console.log(val)

      switch (val) {
        case '1':
          return '三年卡 680元/3年/7次'
        case '2':
          return '年卡 365元/年/7次'
        case '3':
          return '次卡 188元/次'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.card {
  background-color: #fff;
  width: 90%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;

  p {
    margin: 5px 0;
    color: #999;
    &:first-child {
      text-align: right;
      width: 30%;
      font-size: 30px;
      font-weight: bold;
      color: #000;
      margin-right: 30px;
    }
  }
}
</style>
